<template>
  <div class="export-button">
    <div class="export-button-content" @click="$emit('click','client')">
      <CommonIcon type="ios-cloud-download-outline" :size="16" />
      <span style="margin-left:6px;">导出</span>
    </div>
    <div class="export-button-tigger">
      <Dropdown :transfer="false" @on-click="$emit('click',$event)">
        <CommonIcon type="ios-arrow-down" :size="16" />
        <DropdownMenu slot="list">
          <DropdownItem name="client" class="export-item">
            <Icon type="ios-cloud-download-outline" :size="14" />
            <p>
              导出当前页
              <span>（客户端导出）</span>
            </p>
          </DropdownItem>
          <DropdownItem name="server" class="export-item">
            <Icon type="ios-cloud-download-outline" :size="14" />
            <p>
              导出全部
              <span>（服务端导出）</span>
            </p>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
@import "../../../../../assets/styles/theme.less";
.export-button {
  display: inline-flex;
  border-radius: 4px;
  border-style: @border-style-base;
  border-width: @border-width-base;
  border-color: @border-color-split;
  background-color: #fff;
  // background-color: @primary-color;
  color: @text-color;
  position: relative;
  height: 32px;
  user-select: none;
  &-content:not(.disabled) {
    position: relative;
    cursor: pointer;
    padding: 0 12px;
    display: flex;
    align-items: center;
    &:hover:not(:active) {
      background-color: tint(@background, 20%);
    }
    &:active:not(:active) {
      background-color: shade(@background, 5%);
    }
  }
  &-tigger:not(.disabled) {
    position: relative;
    cursor: pointer;
    padding: 0 6px;
    display: flex;
    align-items: center;
    &:hover:not(:active) {
      &::before {
        top: 0;
        bottom: 0;
      }
      background-color: tint(@background, 20%);
    }
    &:active:not(:active) {
      background-color: shade(@background, 5%);
    }
    &::before {
      position: absolute;
      content: "";
      width: 1px;
      top: 4px;
      bottom: 4px;
      left: 0;
      background-color: @border-color-split;
    }
  }
}
.export-item {
  display: flex;
  align-items: center;
  p {
    margin-left: 8px;
    flex: 1;
    span {
      font-style: italic;
      font-weight: 300;
      font-size: 12px;
    }
  }
}
</style>
